<template>
	<!-- 修改个人资料 -->
	<view class="alterPerson">
		<u-navbar
		title="修改个人信息" 
		:is-back="true" 
		:background="navBgStyle" 
		title-color="#fff" 
		back-icon-color="#fff"
		>
		</u-navbar>
		
		<view class="content">
			<view class="form-box">
				<u-form 
				:model="perEditFormDatas" 
				ref="perEditForm" 
				label-width="180"
				>
				
					<!-- 头像 -->
					<u-form-item 
					label="头像:" 
					:required="true" 
					prop="avatar">
						<view class="img-box" @click="toChooseImg">
							<!-- shape="circle" 图片类型 -->
							<u-image
							:src="perEditFormDatas.avatar" 
							border-radius="15"
							shape="circle"
							mode="widthFix"
							>
							</u-image>
							
						</view>
						
					</u-form-item>
						
					<u-form-item  
					label="昵称:"
					prop="name"
					:required="true" 
					>
						<u-input v-model="perEditFormDatas.name" :border="true" maxlength="8"/>
					</u-form-item>
					
					<u-form-item
					label="个性签名:"
					prop="desc"
					:required="true" 
					>
						<u-input 
						v-model="perEditFormDatas.desc" 
						type="textarea"
						:auto-height="true"
						height="30"
						:border="true"
						/>
					</u-form-item>
				</u-form>
			</view>
			
			<view class="btn-box">
				<u-button type="warning" size="medium" @click="editPerInfo">确定</u-button>
				<u-button type="success" size="medium" @click="cancle">取消</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState , mapMutations} from 'vuex';
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		data() {
			return {
				uploadImgUrl : "https://eggblog.bluej.cn/api/imgUpload",	// 图片上传地址
				uploadImgdefaultList: [],	// 上传头像组件默认显示的图片
				// 控制上传进度条显示
				isShowProgress: false,
				//收集数据
				perEditFormDatas: {
					name : "",
					avatar: "",
					desc: ""
				},
				// 表单验证规则
				perFormRules: {
					name: [
						{
							required: true,  // 必填项
							message:"此为必填项",
							trigger: ['change','blur'], //触发验证方式 
						},
						{
							min: 1,
							max: 8,
							message: '长度在1-8个字符之间',
							trigger: ['change','blur']
						}
					],
					desc: [
						{
							required: true,  // 必填项
							message:"此为必填项",
							trigger: ['change','blur'], //触发验证方式 
						},
						{
							min: 1,
							max: 32,
							message: '长度在1-32个字符之间',
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		onLoad() {
			//  进入页面
			// 读取用户个人信息
			this.perEditFormDatas = {
				name : this.userInfo.name,
				avatar: this.userInfo.avatar,
				desc: this.userInfo.desc
			}
			//  读取用户头像
			this.uploadImgdefaultList = [{
				url : this.userInfo.avatar
			}]
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper',async basePath => {
				// 得到裁剪后的图片数据  basePath是base64格式的数据
				this.perEditFormDatas.avatar = basePath;
				
				/* 微信端上传图片 */
				// #ifdef MP-WEIXIN
				await uni.uploadFile({
					url: this.uploadImgUrl,
					filePath: basePath,
					name:"file",
					header: {
						"x-token" : this.userInfo.token
					},
					timeout: 5000,
					success: respath => {
						console.log(respath);
						respath.data = JSON.parse(respath.data)
						this.perEditFormDatas.avatar = respath.data.data[0]
					}
				})
				// #endif
				
				/* H5端上传图片 地址是base64 */
				// #ifdef H5
					let uploadimgRes = await this._api.uploadImg({
						baseArr:[basePath]
					})
					// 将返回的图片真实地址替换到表单数据中
					this.perEditFormDatas.avatar = uploadimgRes[0]
					//console.log(uploadimgRes);
				// #endif
				
			})
		},
		onReady() {
			if (this.$refs.perEditForm) {
				// 表单校验
				this.$refs.perEditForm.setRules(this.perFormRules);
			}
		},
		methods: {
			...mapMutations(['changeUserInfo']),
			// 封面图片上传前触发
			showProgress() {
				// 让上传进度条显示
				this.isShowProgress = true;
			},
			//  封面图片上传完成触发
			coverUploaded(lists, name) {
				lists = lists.map(item => {
					return item.response.data[0];
				})
				// 上传完成 隐藏进度条
				this.isShowProgress = false;
				// 更改提交表单的头像地址
				this.perEditFormDatas.avatar = lists[0]
			},
			// 点击头像图片 跳转头像选择编辑页
			toChooseImg() {
				this.$Router.push({
					// 关于此路径，请见下方"注意事项"
					path: '/pages/avatarCropper/avatarCropper',
					// 内部已设置以下默认参数值，可不传这些参数
					query: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			//  确认修改信息
			editPerInfo () {
				this.$refs.perEditForm.validate(async valid => {
					if (valid) {
						// 验证通过
						try{
							let editRes = await this._api.editPerInfo({
								...this.perEditFormDatas,
								// 项目id为6就可以修改,181就不行(衰)
								projectId: 6
							})
							console.log(editRes)
							this.$u.toast("修改成功~");
							this.changeUserInfo({
								name: this.perEditFormDatas.name,
								avatar:  this.perEditFormDatas.avatar,
								desc: this.perEditFormDatas.desc
							})
							// 返回上一页
							this.$Router.back(1)
							
						}catch(e){
							
							this.$u.toast(e.msg)
						}
					}
				})
			},
			// 取消操作 返回上一页
			cancle() {
				this.$Router.back(1)
			}
		},
		computed:{
			...mapState({
				navBgStyle: state => state.componStyle.navBgStyle,	//	顶部导航栏样式
				userInfo: state => state.userInfo.userInfo,			//	用户信息
			}),
			getToken() {
				if (this.userInfo && this.userInfo.token) {
					return {
						'x-token' :this.userInfo.token
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.alterPerson {
	padding: 30rpx;
	height: calc(100vh - var(--status-bar-height));
	background-color: $uni-bg-color-qgray;
	.content {
		padding: 40rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		.img-box {
			width: 170rpx;
			height: 170rpx;
			padding: 10rpx;
			border-radius: 15rpx;
			border: 1px solid $uni-border-color;
		}
		.btn-box {
			margin-top: 100rpx;
			display: flex;
			justify-content: space-evenly;
		}
	}
}
</style>
